<?php echo $this->render('head.phtml');?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>纯CSS京东商城分类导航菜单代码-懒人建站</title>

    <meta name="keywords" content="JS代码,js特效代码大全,jquery特效,导航菜单代码,焦点幻灯片,企业网页设计欣赏" />
    <meta name="description" content="懒人建站为您提供-js特效代码大全，JS广告代码，导航菜单代码，企业网页设计欣赏，基于jquery的特效插件，焦点幻灯片代码和各种建站技巧。" />
    <style type="text/css">
      .my_left_category{
      width:150px;
      font-size:12px;
      font-family:arial,sans-serif;
      letter-spacing:2px;
      }
      .my_left_category h1{
      background-image:url(/static/img/spring_06.gif);
      height:20px;
      background-repeat:no-repeat;
      font-size:14px;
      font-weight:bold;
      padding-left:15px;
      padding-top:8px;
      margin:0px;
      color:#FFF;
      }
      .my_left_category .my_left_cat_list{
      width:148px;
      border-color:#b60134;
      border-style:solid;
      border-width:0px 1px 1px 1px;
      line-height:13.5pt;
      }
      .my_left_category .my_left_cat_list h2 {
      margin:0px;
      padding:3px 5px 0px 9px;
      }
      .my_left_category .my_left_cat_list h2 a {
      color:#d6290b;
      font-weight:bold;
      font-size:14px;
      line-height:22px;
      }
      .my_left_category .my_left_cat_list h2 a:hover {
      color:#d6290b;
      font-weight:bold;
      font-size:14px;
      line-height:22px;
      }
      .my_left_category .h2_cat{
      width:148px;
      height:26px;
      background-image:url(/static/img/my_menubg.gif);
      background-repeat:no-repeat;
      line-height:26px;
      font-weight:normal;
      color:#333333;
      position:relative;
      }
      .my_left_category .h2_cat_1{
      width:148px;
      height:26px;
      background-image:url(/static/img/my_menubg_1.gif);
      background-repeat:no-repeat;
      line-height:26px;
      font-weight:normal;
      color:#333333;
      position:relative;
      }
      .my_left_category a{
      font:12px;
      text-decoration:none;
      color:#333333;
      }
      .my_left_category a:hover{
      text-decoration:underline;
      color:#ff3333;
      }
      .my_left_category h3{
      margin:0px;
      padding:0px;
      height:26px;
      font-size:12px;
      font-weight:normal;
      display:block;
      padding-left:8px;
      }
      .my_left_category h3 span{color:#999999; width:145px; float:right;}
      .my_left_category h3 a{	line-height:26px;}
      .my_left_category .h3_cat{
      display:none;
      width:204px;
      position:absolute;
      left:123px;
      margin-top:-26px;
      cursor:auto;
      }
      .my_left_category .shadow{
      position:inherit;
      background:url(/static/img/shadow_04.gif) left top;
      width:204px;
      }
      .my_left_category .shadow_border{
      position:inherit;
      width:200px;
      border:1px solid #959595; margin-top:1px;
      border-left-width:0px;
      background:url(/static/img/shadow_border.gif) no-repeat 0px 21px;
      background-color:#ffffff;
      margin-bottom:3px
      }
      .my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}
      .my_left_category .shadow_border ul a {
      list-style:none;
      padding-left:10px;
      background-image:url(/static/img/my_cat_sub_menu_dot.gif);
      background-repeat:no-repeat;
      background-position:0px 8px;
      float:left;
      width:75px;
      height:26px;
      overflow:hidden;
      letter-spacing:0px;
      }
      .my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}
      .my_left_category .active_cat h3 { font-weight:bold}
      .my_left_category .active_cat h3 span{ display:none;}
      .my_left_category .active_cat div{display:block;}
    </style>
  </head>
  <body>
    <div class="my_left_category">
      <h1>课程分类</h1>
      <div class="my_left_cat_list">
	<?php foreach($this->cats as $cat){?>
	<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
	  <h3><a href="#"><?php echo $cat["detail"]["name"];?></a></h3>
	  <div class="h3_cat">
	    <div class="shadow">
	      <div class="shadow_border">
		<ul>
		  <?php foreach($cat["children"] as $child){ ?>
		  <a href="#"><?php echo $child["detail"]["name"];?></a>
		  <?php } ?>		  
		</ul>
	      </div>
	    </div>
	  </div>
	</div>
	<?php } ?>
      </div>
    </div>

  </body>
</html>
